<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在线SQL学习工具</title>

	<style>
		html{
			height: 96%;
			width:100%;
		}
		body{
			height: 100%;
			width:99%;
			background:#cacaca;
			background-image: url("img/qq.jpg");
		}
		#con{
			width: 90%;
			height: 98%;
			margin:0 auto;
		}
		
		#title{
			width:100%;
			height:12%;
			font-size:220%;
			color: #cc3399;
		}
		#left{
			float: left;
			width: 40%;
			height:89%;
		}
		#tool{
			width:100%;
			height:11%;
		}
		#l1{
			width:50%;
			float:left;
		}
		#l2{
			width:48%;
			float:left;
		}
		#l21{
			width:40%;
			position: absolute;
			z-index:-1;
			
		}
		#l22{
			width:50%;
		}
		#right{
			float: right;
			width: 59%;
			height:89%;
		}
		#text{
			font-size:22px; 
			color:WHITE;
			background-color:#89d3fd;
			width:100%;
			height:85%;
		}
		#result{
			font-size:22px; 
			color:#F00;
			width:100%;
			height:85%;
		}
		#loadfile{
			filter:alpha(opacity=0);  
			-moz-opacity:0;
 			opacity: 0;
		}
		
	</style>

<script type="text/javascript">

function stop(){
	return false;
	}
	document.oncontextmenu=stop;

document.onkeydown=function(event){
	    var e = event || window.event || arguments.callee.caller.arguments[0];
	    if(e && e.keyCode==113)   c(); //F2   
	}
	function callback(xmlhttp){
		var r = document.getElementById("result");
		var res = xmlhttp.responseText;
		r.value = res.replace(/\u0005|\u0006/g,"");
	}
	
	function write(res){
		document.getElementById("result").value = res;
	}

	function c(){ 
		var txt=document.getElementById("text");
		var str = txt.value.slice(txt.selectionStart,txt.selectionEnd);
		if(str.length<5) {
			alert("请选中要执行的SQL语句 ！");
			return;
		}
		var url = "server.view?callback=callback&sql="+str;
		request(url,callback);
	} 

	function createXMLHttpRequest() {
	var XMLHttp = 
	[
		function () {return new XMLHttpRequest();},
		function () {return new ActiveXObject("Msxml2.XMLHTTP");},
		function () {return new ActiveXObject("Msxml3.XMLHTTP");},
		function () {return new ActiveXObject("Microsoft.XMLHTTP");}
	];

	var xmlhttp = false;

	for(var i=0;i<XMLHttp.length;i++){
		try{
			xmlhttp = XMLHttp[i]();
		}
		catch(e){
			continue;
		}
		break;
		
	}
	return xmlhttp;
}

function request(url,callback,data){
	var xmlhttp = createXMLHttpRequest();
	if(!xmlhttp) return false;
	var method = (data) ? "POST" : "GET";
	xmlhttp.open(method,url,true);
	xmlhttp.setRequestHeader('User-Agent','XMLHTTP/1.0');
	xmlhttp.setRequestHeader('Content-type','application/x-www-from-urlencoded');
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState != 4) return false;
		if(xmlhttp.status != 200 && xmlhttp.status != 304){
			alert("HTTP 请求错误!"+xmlhttp.status);
			return false;
		}
		callback(xmlhttp);
	}
	//if(xmlhttp.readyState == 4) return true;
	xmlhttp.send(data);
}

function updata(){
	var tableName = document.getElementById("tableName");
	var table = prompt("您想将数据导入哪个表？","");
	if(table==null || table=="") return;
	tableName.value = table;
	document.getElementById("fileLoad").submit();
}

function clearScreen(){
	document.getElementById("text").value="";
	document.getElementById("result").value="";
}

</script>

</head>
<body>

	<div id="con">
		<div id="title">
			<center> ----在线SQL学习工具------- </center>
		</div>
		<div id="left">
			<textarea id="text"> </textarea>
			<div id="tool">
				<form target="myframe" action="uploadServlet.view" method="post" id="fileLoad" enctype = "multipart/form-data">
					<div id="l1">
						<input type="button" name="" value="清屏" onclick="clearScreen()">
						<input type="button" name="sub" id="sub" value="执行! ( F2 )" onclick="c()">
					</div>
					<div id="l2">
						<div id="l21">
						<input type="button" value="从文件导入数据" id="btn">
						</div>
						<div id="l22">
						<input onclick="alert('\t数据为以 \\t 分割的.txt文件\n且不含正确数据以外的任何形式数据')" type="file" name="loadfile" value="导入数据" id="loadfile" onchange="updata()">
						</div>
					</div>
					<input type="hidden" name="tableName" id="tableName" value="">
				</form>
			</div>
		</div>
		
		<div id="right">
			<textarea readonly="true" id="result"> </textarea>
		</div>	
	</div>
	<iframe name="myframe" style="display:none"></iframe>
</body>
</html>